


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			国家: {{country}}
			<hr/>
			<country-select :options="options" v-model:country="country"></country-select>
		</div>
		
		<template id="contry_module">
			<div style='background-color:lightblue'>
				<h2>子组件</h2>
				选择国家:<input type="text" :value='country'/> 
				<select :value = 'country'@change="$emit('update:country',$event.target.value)">
					<option disabled>请选择</option>
					<option v-for="o in options" :value="o">
						{{o}}
					</option>
				</select>
			</div>
		</template>
		
		<script>
			var app = Vue.createApp({
				data() {
					return {
						options: ['中国','美国','日本','韩国'],
						country:"中国"
					}
				}
			});
			app.component('country-select',{
				props:['options','country'],
				emits:['update:country'],
				template:'#contry_module'
			});	
			var vm = app.mount("#app")
		</script>



	</body>
</html>